<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="./index.js"></script>
</body>
<style>
    #myCanvas {
        background-color: #78c7bc;
    }
</style>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth * devicePixelRatio
canvas.height = window.innerHeight * devicePixelRatio

ctx.translate(canvas.width / 2, canvas.height)
ctx.scale(1, -1) // 缩放更改坐标系, x轴不变, y轴改为向上
drawBranch([0,0], 20, 200, 80)

function drawBranch(v0, thick, length, dir) { // v0起点坐标, thick树干粗细, length分支长度, dir与x轴夹角
    if(thick < 10 && Math.random() < 0.3) {
        return
    }
    if(thick < 2) {
        ctx.beginPath()
        ctx.arc(...v0, 10, 0, 2 * Math.PI)
        ctx.fillStyle = Math.random() < 0.5 ? '#fff' : '#f40'
        ctx.fill()
        return
    }
    ctx.beginPath()
    ctx.moveTo(...v0) // 起点
    const v1 = [ // 三角函数求出终点坐标
        v0[0] + length * Math.cos((dir * Math.PI) / 180),
        v0[1] + length * Math.sin((dir * Math.PI) / 180)
    ]
    ctx.lineTo(...v1) // 终点
    ctx.strokeStyle = '#333' //颜色
    ctx.lineCap = 'round' // 线头样式弧形
    ctx.lineWidth = thick // 线的粗细
    ctx.stroke()
    // 递归绘制树的分支
    drawBranch(v1, thick * 0.8, length * 0.8, dir + Math.random() * 30 ) 
    drawBranch(v1, thick * 0.8, length * 0.7, dir - Math.random() * 30 )  
}

</script>
</html>
